<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人项目</title>
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"/>
	</head>
	<style type="text/css">
		.content{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			width: 300px;
			height: 420px;
			background: white;
			box-shadow: 2px 2px 5px 0px #888888;
			border: 1px #d5d5d5 solid;
		}
		.content:after,.content:before{
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
		.content:before{
			left: 3px;
			top: 3px;
			box-shadow: 2px 2px 5px 0px #a3a3a3;
		}
		.content:after{
			left: 5px;
			top: 5px;
			box-shadow: 2px 2px 5px 0px #a3a3a3;
		}
		.content h3{
			background-color: #009688;
			margin: 0;
			padding: 20px 0;
			text-indent: 2em;
			color: white;
			margin-bottom: 40px;
		}
		.content ul li{
			list-style: none;
			font-size: 18px;
			margin: 15px 0 0 10px;
		}
		.content ul li span{
			margin-right: 20px;
		}
		.content ul li a{
			/* text-decoration: ; */
			color: #666;
		}
		/* .content ul li:first-of-type a{
			color: #e88b00;
		}
		.content ul li:nth-of-type(2) a{
			color: #777bce;
		}
		.content ul li:nth-of-type(3) a{
			color: #7ecdb6;
		} */
		.back{
			font-size: 18px;
			position: absolute;
			bottom: 10px;
			width: 100%;
			text-align: center;
		}
		.mask{
			position: absolute;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.5);
			display: grid;
			place-content: center;
			display: none;
		}
		.mask .bg{
			width: 250px;
			/* height: 500px; */
		}
	</style>
	<body>
		<div class="content">
			<h3>我的项目</h3>
			<ul>
				<li>
					<span>▲</span>
					<a href="http://music.likejs.cc" title="Cc云音乐">Cc云音乐</a>
				</li>
				<li>
					<span>▲</span>
					<a href="http://novel.likejs.cc" title="Cc小说">Cc小说</a>
				</li>
				<li>
					<span>▲</span>
					<a href="javascript:void(0)" title="短视库-小程序" class="ds" onclick="look(1)" data-id="1">短视库-小程序</a>
				</li>
				<li>
					<span>▲</span>
					<a href="javascript:void(0)" title="记账-小程序" class="jz" onclick="look(2)" data-id="2">记账-小程序</a>
				</li>
			</ul>
			<div class="back">
				<a href="https://gitee.com/Cc778/MyProject">返回gitee</a>
			</div>
		</div>
		<div class="mask">
			<img src="" class="bg">
		</div>
	</body>
	<script type="text/javascript">
		const all = document.querySelectorAll(".ds,.jz");
		const bg = document.querySelector(".bg");
		const mask = document.querySelector(".mask");
		var flag = false;
		function look(i){
			if(i==1)bg.src="./ck.jpg";
			else bg.src="./jz.jpg";	
			mask.style.display="grid";
		}
		
		mask.onclick = ()=>{
			mask.style.display="none";
		}
	</script>
</html>
